<template>
  <div class="spread__wrap divBox">
    <el-card class="box-card" shadow="hover">
      <el-row>
        <el-col v-bind="grid">
          <el-form ref="spreadRef" v-loading="spreadLoading" :model="spreadForm" label-width="200px" class="spreadCls">

            <!-- 分销海报【start】 -->
            <el-form-item>
              <span slot="label">
                <span>分销海报 </span>
                <el-tooltip class="item" effect="dark" content="个人中心分销海报图片，建议尺寸600x1000" placement="top-start">
                  <i class="el-icon-info" />
                </el-tooltip>
              </span>
              <div class="upLoadPicBox spreadUploadPicBox">
                <div v-for="(item, index) in spreadForm.posterImages" :key="index" class="pictrue mr10">
                  <el-image ref="spreadLargePreView" class="imgHover" :src="$uploadURL(item)" :preview-src-list="[$uploadURL(item)]"></el-image>
                  <div class="upload_cover_preview">
                    <i @click.stop="largePreview('spreadLargePreView', index)" class="iconfont icon-yanjing"></i>
                    <i @click.stop="delLarge(index)" class="el-icon l-upload el-icon-delete"></i>
                  </div>
                </div>
                <div v-if="spreadForm.posterImages.length < 10" @click="modalPicTap('2')" class="upLoad"><i class="el-icon l-upload el-icon-camera-solid"></i></div>
              </div>
            </el-form-item>
            <!-- 分销海报【end】 -->

            <!-- 冻结时间【start】 -->
            <el-form-item prop="extractTime">
              <span slot="label">
                <span>冻结时间 </span>
                <el-tooltip class="item" effect="dark" content="佣金冻结时间(天)" placement="top-start">
                  <i class="el-icon-info" />
                </el-tooltip>
              </span>
              <el-input-number v-model="spreadForm.commission_FroZenTime" :min="-1" :setp="1" size="small" placeholder="佣金冻结时间(天)" @keydown.native="channelInputLimit" />
            </el-form-item>
            <!-- 冻结时间【end】 -->

            <!-- 自动返佣【start】 -->
            <el-form-item prop="brokerageFuncStatus">
              <span slot="label">
                <span>自动返佣 </span>
                <el-tooltip class="item" effect="dark" content="自动返佣(默认开启)" placement="top-start">
                  <i class="el-icon-info" />
                </el-tooltip>
              </span>
              <el-radio-group v-model="spreadForm.isSelfCommission">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 自动返佣【end】 -->

            <!-- 提现最低金额【start】 -->
            <el-form-item prop="storeBrokerageQuota">
              <span slot="label">
                <span>提现最低金额(元) </span>
                <el-tooltip class="item" effect="dark" content="提现最低金额(元)" placement="top-start">
                  <i class="el-icon-info" />
                </el-tooltip>
              </span>
              <el-input-number v-model="spreadForm.withdrawal_MinAmount" :min="-1" :step="1" size="small" placeholder="满额分销最低金额(元)" @keydown.native="channelInputLimit" />
            </el-form-item>
            <!-- 提现最低金额【end】 -->

            <!-- 提现银行卡【start】 -->
            <el-form-item prop="userExtractBank">
              <span slot="label">
                <span>提现银行卡 </span>
                <el-tooltip class="item" effect="dark" content="提现银行卡，每个银行使用英文逗号隔开" placement="top-start">
                  <i class="el-icon-info" />
                </el-tooltip>
              </span>
              <el-input
                v-model="spreadForm.withdrawal_Bank"
                type="textarea"
                :rows="2"
                placeholder="提现银行卡，每个银行使用英文逗号隔开"
              />
            </el-form-item>
            <!-- 提现银行卡【end】 -->
            <el-form-item>
              <el-button type="primary" :loading="spreadBtnLoading" @click="submitForm('spreadRef')">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  splitArray
} from '@/utils/index';
import {
  spreadConfigApi,
  spreadConfigUpdateApi
} from '@/api/agent'

export default {
  name: 'Spread',
  data() {
    return {
      grid: {
        xl: 12,
        lg: 16,
        md: 24,
        sm: 24,
        xs: 24
      },
      spreadForm: {
        // 分销海报
        posterImages: [],
        // 冻结天数
        commission_FroZenTime: 0,
        // 自动返佣
        isSelfCommission: 0,
        // 提现自动金额
        withdrawal_MinAmount: 0,
        // 提现支持的银行
        withdrawal_Bank: ''
      },
      spreadLoading: false,
      spreadBtnLoading: false
    }
  },
  mounted() {
    this.getSpreadConfig();
  },
  methods: {
    // 大图预览
    largePreview(ref, index = -99) {
      index == -99 ? this.$refs[ref].clickHandler() : this.$refs[ref][index].clickHandler();
    },
    // 删除图片
    delLarge(index = 0) {
      this.spreadForm.posterImages.splice(index, 1)
    },
    modalPicTap(num) {
      const _this = this
      this.$modalUpload((data) => {
        if (data.length > 10) this.$message.warning('最多选择10张图片！')
        if ((data.length + _this.spreadForm.posterImages.length) > 10) this.$message.warning('最多选择10张图片！')
        const list = []
        data.forEach((item, index) => {
          if (_this.spreadForm.posterImages.length + index + 1 <= 10) list.push(item.path)
        })
        _this.spreadForm.posterImages.push(...list)
      }, num, '', '分销海报')
    },
    channelInputLimit(e) {
      const key = e.key
      // 不允许输入'e'和'.'
      if (key === 'e' || key === '.') {
        e.returnValue = false
        return false
      }
      return true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$set(this, 'spreadBtnLoading', true);
          spreadConfigUpdateApi({
            posterImages: this.spreadForm.posterImages.join(','),
            commission_FroZenTime: this.spreadForm.commission_FroZenTime,
            isSelfCommission: this.spreadForm.isSelfCommission,
            withdrawal_MinAmount: this.spreadForm.withdrawal_MinAmount,
            withdrawal_Bank: this.spreadForm.withdrawal_Bank
          }).then(() => {
            this.getSpreadConfig()
            this.$message.success('提交成功');
            this.$set(this, 'spreadBtnLoading', false);
          }).catch(() => {
            this.$message.error('提交失败');
            this.$set(this, 'spreadBtnLoading', false);
          });
        } else {
          return false;
        };
      })
    },
    // 获取详细信息
    getSpreadConfig() {
      this.$set(this, 'spreadLoading', true);
      spreadConfigApi()
        .then(res => {
          this.$set(this, 'spreadForm', {
            // 分销海报
            posterImages: splitArray(res.posterImages, ','),
            // 冻结天数
            commission_FroZenTime: res.commission_FroZenTime,
            // 自动返佣
            isSelfCommission: res.isSelfCommission,
            // 提现自动金额
            withdrawal_MinAmount: res.withdrawal_MinAmount,
            // 提现支持的银行
            withdrawal_Bank: res.withdrawal_Bank
          });
          this.$set(this, 'spreadLoading', false);
        }).catch(() => {
          this.$set(this, 'spreadLoading', false);
        });
    }
  }
}
</script>

<style lang="scss" scoped>
  .spread__wrap {
    .acea-row {
      .upLoadPicBox {
        display: inline-block;
        cursor: pointer;
        .upLoad {
          width: 58px;
          height: 58px;
          line-height: 58px;
          border: 1px dotted rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          background: rgba(0, 0, 0, 0.02);
          display: flex;
          justify-content: center;
          align-items: center;
          .cameraIconfont {
            color: #898989;
            font-size: 26px;
          }
        }
      }
      .acea-flex {
        display: flex;
        .pictrue {
          width: 60px;
          height: 60px;
          border: 1px dotted rgba(0, 0, 0, .1);
          margin-right: 10px;
          position: relative;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
          .btndel {
            position: absolute;
            z-index: 1;
            left: 48px;
            top: -7px;
          }
        }
        .el-icon-circle-close {
          cursor: pointer;
        }
      }
    }
  }
  .spreadUploadPicBox {
    display: flex !important;
    flex-wrap: wrap;
    .imgHover {
      flex-shrink: 0;
    }
  }
</style>
